import react from '@vitejs/plugin-react';
import path from 'path';
import reactInlineCSSModulePlugin from 'react-inline-css-module/dist/vite-plugin';
import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';
import svgr from 'vite-plugin-svgr';
function resolve(dir = '') {
  return path.resolve(__dirname, '.', dir);
}
// import svgLoader from 'vite-svg-loader';
// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    // jsxInject: `import * as React from 'react'`,
  },
  plugins: [
    // 加载svg
    svgr({
      // Set it to `true` to export React component as default.
      // Notice that it will overrides the default behavior of Vite.
      exportAsDefault: true,
      include: 'src/**/*.svg',
    }),
    react(),
    reactInlineCSSModulePlugin({ reactVariableName: 'React' }),
    compression(),
  ],
  css: {
    // css模块化，文件以.module.[css|less|scss]结尾，否则不生效的
    modules: {
      /**
       * 配置 CSS modules 的行为。选项将被传递给 postcss-modules。
       * 默认：'camelCaseOnly'。
       * 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
       * */
      localsConvention: 'camelCase',
    },
  },
  resolve: {
    alias: {
      '@': resolve('src'),
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },
  server: {
    proxy: {
      '/api': {
        // 当遇到 /api 路径时，将其转换成 target 的值
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
        secure: false,
        ws: true,
      },
    },
    open: true,
    port: 8081,
    host: '0.0.0.0',
  },
  build: {
    assetsDir: './build',
    chunkSizeWarningLimit: 500,
    minify: 'terser',
    // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
    cssCodeSplit: true,
    terserOptions: {
      compress: {
        // warnings: false,
        // 打包时删除console
        drop_console: true,
        drop_debugger: true, //打包时删除 debugger
        pure_funcs: ['console.log'],
      },
      output: {
        // 去掉注释内容
        comments: true,
      },
    },
  },
});
